Sužinokite, kaip naudoti CSS, norint pritaikyti teksto žymėjimo spalvą ir išvaizdą, taip pagerinant vartotojo patirtį ir prekės ženklo vientisumą įvairiose naršyklėse bei platformose.
CSS pasirinktinis pažymėjimas: teksto žymėjimo stiliaus įvaldymas
Teksto žymėjimas – tas paprastas veiksmas, kai pele velkate per žodžius tinklalapyje – dažnai yra pamirštamas kalbant apie dizainą ir prekės ženklo identitetą. Tačiau numatytosios naršyklės pažymėjimo spalvos pritaikymas gali ženkliai pagerinti vartotojo patirtį ir sustiprinti jūsų prekės ženklo atpažįstamumą. Šis išsamus gidas padės jums suprasti viską, ką reikia žinoti apie CSS pasirinktinį pažymėjimą, įskaitant ::selection pseudo-elementą, suderinamumą su naršyklėmis, prieinamumo aspektus ir praktinius pavyzdžius, kurie pagerins jūsų svetainės dizainą.
Kodėl verta pritaikyti teksto žymėjimo spalvas?
Nors numatytoji naršyklės pažymėjimo spalva (dažniausiai mėlyna) yra funkcionali, ji gali neatitikti jūsų svetainės spalvų schemos ar prekės ženklo estetikos. Pažymėjimo spalvos pritaikymas suteikia keletą privalumų:
- Prekės ženklo vientisumas: Užtikrinkite, kad pažymėjimo spalva derėtų prie jūsų prekės ženklo spalvų, sukuriant vientisą vizualinę patirtį.
- Geresnė vartotojo patirtis: Gerai parinkta pažymėjimo spalva gali pagerinti skaitomumą ir sumažinti akių nuovargį, ypač vartotojams, turintiems regos sutrikimų.
- Patrauklesnė išvaizda: Pasirinktinis pažymėjimas gali suteikti jūsų svetainės dizainui subtilaus rafinuotumo ir profesionalumo.
- Didesnis įsitraukimas: Nors ir atrodo nereikšmingos, vizualinės detalės prisideda prie bendro vartotojų įsitraukimo ir pasitenkinimo.
::selection pseudo-elementas
::selection pseudo-elementas yra raktas į teksto žymėjimo pritaikymą naudojant CSS. Jis leidžia stilizuoti pažymėto teksto fono spalvą ir teksto spalvą. Atkreipkite dėmesį, kad naudojant šį pseudo-elementą negalima stilizuoti kitų savybių, tokių kaip šrifto dydis, svoris ar teksto dekoracijos.
Pagrindinė sintaksė
Pagrindinė sintaksė yra paprasta:
::selection {
background-color: spalva;
color: spalva;
}
Pakeiskite spalva norimomis spalvų reikšmėmis (pvz., šešioliktainėmis, RGB, HSL ar pavadinimų spalvomis).
Pavyzdys
Štai paprastas pavyzdys, kuris nustato šviesiai mėlyną fono spalvą ir baltą teksto spalvą, kai tekstas yra pažymimas:
::selection {
background-color: #ADD8E6; /* Šviesiai mėlyna */
color: white;
}
Pridėkite šią CSS taisyklę į savo stilių failą arba <style> žymą, kad pritaikytumėte pasirinktinį pažymėjimą.
Suderinamumas su naršyklėmis: prefiksų naudojimas
Nors ::selection yra plačiai palaikomas šiuolaikinėse naršyklėse, senesnėms versijoms gali prireikti tiekėjų prefiksų. Siekiant užtikrinti maksimalų suderinamumą, geriausia praktika yra įtraukti -moz-selection ir -webkit-selection prefiksus.
Atnaujinta sintaksė su prefiksais
Štai atnaujinta sintaksė, įtraukianti tiekėjų prefiksus:
::-moz-selection {
background-color: #ADD8E6;
color: white;
}
::selection {
background-color: #ADD8E6;
color: white;
}
::-webkit-selection {
background-color: #ADD8E6;
color: white;
}
Tai užtikrina, kad jūsų pasirinktinis pažymėjimas veiks platesniame naršyklų spektre, įskaitant senesnes „Firefox“ (-moz-selection) ir „Safari“/„Chrome“ (-webkit-selection) versijas.
Prieinamumo aspektai
Pritaikant teksto žymėjimo spalvas, labai svarbu teikti pirmenybę prieinamumui. Prastas spalvų pasirinkimas gali apsunkinti pažymėto teksto skaitymą vartotojams su regos sutrikimais. Štai keletas svarbių aspektų:
- Kontrasto santykis: Užtikrinkite pakankamą kontrastą tarp fono spalvos ir pažymėto teksto spalvos. WCAG (Tinklalapių turinio prieinamumo gairės) rekomenduoja bent 4.5:1 kontrasto santykį normaliam tekstui ir 3:1 dideliam tekstui.
- Daltonizmas: Rinkdamiesi pažymėjimo spalvas, atsižvelkite į daltonizmą. Venkite spalvų derinių, kuriuos sunku atskirti žmonėms su skirtingais spalvų matymo sutrikimais. Įrankiai, tokie kaip „WebAIM Color Contrast Checker“ (https://webaim.org/resources/contrastchecker/), gali padėti įvertinti spalvų derinius.
- Vartotojo nustatymai: Apsvarstykite galimybę leisti vartotojams pritaikyti pažymėjimo spalvą pagal savo individualius poreikius ir pageidavimus. Tai galima pasiekti per vartotojo nustatymus arba naršyklės plėtinius.
Pavyzdys: prieinamas spalvų derinys
Štai prieinamo spalvų derinio su aukštu kontrasto santykiu pavyzdys:
::selection {
background-color: #2E8B57; /* Jūros žalia */
color: #FFFFFF; /* Balta */
}
Šis derinys suteikia stiprų kontrastą, todėl vartotojams lengviau skaityti pažymėtą tekstą.
Pažangios pritaikymo technikos
Be paprastų spalvų pakeitimų, galite naudoti CSS kintamuosius ir kitas technikas, kad sukurtumėte sudėtingesnius ir dinamiškesnius teksto žymėjimus.
CSS kintamųjų naudojimas
CSS kintamieji (taip pat žinomi kaip pasirinktinės savybės) leidžia apibrėžti pakartotinai naudojamas reikšmes, kurias galima lengvai atnaujinti. Tai ypač naudinga palaikant nuoseklumą visame svetainės dizaine.
CSS kintamųjų apibrėžimas
Apibrėžkite savo CSS kintamuosius :root pseudo-klasėje:
:root {
--highlight-background: #FFD700; /* Auksinė */
--highlight-text: #000000; /* Juoda */
}
CSS kintamųjų naudojimas ::selection taisyklėje
Naudokite var() funkciją, kad nurodytumėte CSS kintamuosius savo ::selection taisyklėje:
::selection {
background-color: var(--highlight-background);
color: var(--highlight-text);
}
Dabar galite lengvai pakeisti pažymėjimo spalvą atnaujindami CSS kintamuosius :root pseudo-klasėje.
Dinaminės pažymėjimo spalvos pagal kontekstą
Galite sukurti dinamines pažymėjimo spalvas, priklausomai nuo pažymėto teksto konteksto. Pavyzdžiui, galbūt norėsite naudoti skirtingą pažymėjimo spalvą antraštėms ir pagrindiniam tekstui. Tai galima pasiekti naudojant „JavaScript“ ir CSS kintamuosius.
Pavyzdys: diferencijuoti pažymėjimai
Pirmiausia, apibrėžkite CSS kintamuosius skirtingoms pažymėjimo spalvoms:
:root {
--heading-highlight-background: #87CEEB; /* Dangaus mėlyna */
--heading-highlight-text: #FFFFFF; /* Balta */
--body-highlight-background: #FFFFE0; /* Šviesiai geltona */
--body-highlight-text: #000000; /* Juoda */
}
Tada, naudokite „JavaScript“, kad pridėtumėte klasę pažymėto teksto tėviniam elementui:
// Tai supaprastintas pavyzdys, kuriam reikalinga patikimesnė implementacija
// norint tiksliai apdoroti skirtingus žymėjimo scenarijus.
document.addEventListener('mouseup', function(event) {
const selection = window.getSelection();
if (selection.rangeCount > 0) {
const range = selection.getRangeAt(0);
const parentElement = range.commonAncestorContainer.parentNode;
if (parentElement.tagName === 'H1' || parentElement.tagName === 'H2' || parentElement.tagName === 'H3') {
parentElement.classList.add('heading-selected');
} else {
parentElement.classList.remove('heading-selected');
}
}
});
Galiausiai, apibrėžkite CSS taisykles skirtingoms klasėms:
.heading-selected::selection {
background-color: var(--heading-highlight-background);
color: var(--heading-highlight-text);
}
::selection {
background-color: var(--body-highlight-background);
color: var(--body-highlight-text);
}
Šis pavyzdys parodo, kaip galite sukurti skirtingas pažymėjimo spalvas antraštėms ir pagrindiniam tekstui, atsižvelgiant į pažymėtą kontekstą. Išsamesnei implementacijai reikėtų apdoroti įvairius žymėjimo scenarijus ir kraštutinius atvejus naudojant „JavaScript“.
Praktiniai pavyzdžiai ir naudojimo atvejai
Štai keletas praktinių pavyzdžių ir naudojimo atvejų, kurie įkvėps jūsų pačių pasirinktinius pažymėjimo dizainus:
- Minimalistinis dizainas: Naudokite subtilią, mažiau sodrią spalvą pažymėjimui, kad išlaikytumėte švarią ir modernią išvaizdą. Pavyzdžiui, šviesiai pilką ar smėlio spalvą.
- Tamsi tema: Apverskite numatytąsias spalvas tamsiai temai, naudodami tamsų foną ir šviesų tekstą pažymėjimui. Tai pagerina skaitomumą prasto apšvietimo sąlygomis.
- Prekės ženklo stiprinimas: Naudokite savo prekės ženklo pagrindinę ar antrinę spalvą pažymėjimui, kad sustiprintumėte prekės ženklo atpažįstamumą.
- Interaktyvios pamokos: Interaktyviose pamokose naudokite ryškią, dėmesį patraukiančią spalvą pažymėjimui, kad nukreiptumėte vartotojus per žingsnius. Pavyzdžiui, ryškiai geltoną ar oranžinę.
- Kodo išryškinimas: Pritaikykite pažymėjimo spalvą kodo fragmentams, kad pagerintumėte skaitomumą ir atskirtumėte skirtingus kodo elementus.
Pavyzdys: kodo išryškinimas su pasirinktiniu pažymėjimu
Kodo išryškinimui subtili, bet aiški spalva gali pagerinti skaitomumą:
pre ::selection {
background-color: rgba(255, 255, 0, 0.2); /* Šviesiai geltona su permatomumu */
color: #000000; /* Juoda */
}
Šis pavyzdys naudoja pusiau permatomą šviesiai geltoną spalvą pažymėtam kodui paryškinti, todėl jį lengva atskirti, bet jis pernelyg neblaško dėmesio.
Dažniausios klaidos, kurių reikia vengti
Štai keletas dažniausių klaidų, kurių reikėtų vengti pritaikant teksto žymėjimo spalvas:
- Prieinamumo ignoravimas: Neužtikrinamas pakankamas kontrastas tarp fono ir teksto spalvų.
- Pernelyg ryškios ar blaškančios spalvos: Naudojamos spalvos, kurios yra per ryškios ar blaškančios, galinčios sukelti akių nuovargį ir sumažinti skaitomumą.
- Nenuoseklus stilius: Taikomi skirtingi pažymėjimo stiliai įvairiose svetainės dalyse, sukuriant nesuderintą vartotojo patirtį.
- Pamirštami tiekėjų prefiksai: Neįtraukiami tiekėjų prefiksai senesnėms naršyklėms.
- Pernelyg dažnas pasirinktinių pažymėjimų naudojimas: Naudokite pasirinktinius pažymėjimus tik ten, kur tai pagerina vartotojo patirtį. Pernelyg dažnas jų naudojimas gali padaryti svetainę perkrautą ar blaškančią.
Išvada
Teksto žymėjimo pritaikymas naudojant CSS yra paprastas, bet efektyvus būdas pagerinti vartotojo patirtį ir sustiprinti jūsų prekės ženklo identitetą. Suprasdami ::selection pseudo-elementą, atsižvelgdami į naršyklių suderinamumą ir teikdami pirmenybę prieinamumui, galite sukurti vizualiai patrauklias ir patogias naudoti svetaines. Eksperimentuokite su skirtingais spalvų deriniais ir technikomis, kad rastumėte tobulą pažymėjimo stilių savo prekės ženklui.
Nepamirškite visada išbandyti savo pasirinktinius pažymėjimus skirtingose naršyklėse ir įrenginiuose, kad užtikrintumėte nuoseklius rezultatus. Atkreipdami dėmesį į šią dažnai pamirštamą detalę, galite pagerinti savo svetainės dizainą ir sukurti labiau įtraukiančią patirtį savo vartotojams.